<template>
	<div class="tab-com">
		<div v-for="(item, idx) in tabs" :key="idx" :class="['tab-item', { active: value === item.value }]" @click="handleClick(item)">
            <span>{{ item.label }}</span>
        </div>

        <el-button type="text" icon="el-icon-plus" @click="add"></el-button>
	</div>
</template>

<script>
export default {
	name: 'TabCom',
	props: {
		tabs: {
			type: Array,
			default: () => ([
				{label: '落区1', value: 1}, 
				{label: '落区2', value: 2}, 
			])
		},
		value: {
			type: String | Number,
			default: 0
		}
	},
	data() {
		return {
			
		}
	},
	methods: {
		handleClick(item) {
			this.$emit('input', item.value);
			this.$emit('change', item);
		},
        add() {
			this.$emit('add');
        }
	}
}
</script>

<style lang="less" scoped>
.tab-com {
	display: flex;
    align-items: center;
	border-radius: 4px;

	.tab-item {
        border: 1px solid #979797;
        margin-right: 10px;
		width: 60px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		color: #72767b;
		background: #ffffff;
		transition: background 0.3s;
		cursor: pointer;

		&.active {
            color: #ffffff;
			background: #5f9ce5;
		}
	}

    .el-button {
        margin-left: 10px;
    }
}
</style>
